<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        1.依次输出什么？
            global begin:undefined
            foo() begin:1
            foo() begin:2
            foo() begin:3
            foo() end3
            foo() end2
            foo() end1
            global end1
        2.整个过程中产生了几个执行上下文？
            5个
     -->
     <script>
        console.log('global begin:' + i);
        var i = 1
        foo(1)
        function foo(i){
            if(i == 4){
                return
            }
            console.log('foo() begin:' + i);
            foo(i + 1)    //递归调用： 在函数内部调用自己
            console.log('foo() end' + i);
        }
        console.log('global end' + i);
     </script>
</body>
</html>